<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QQ音乐 - 首页</title>
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
      background-color: #f5f5f5;
      color: #333;
      line-height: 1.5;
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    ul, ol {
      list-style: none;
    }
    
    /* 头部样式 */
    header {
      background-color: #31c27c;
      padding: 10px 0;
    }
    
    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .header-inner img {
      height: 30px;
    }
    
    /* 主要内容区域 */
    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    /* 区域标题样式 - 修改为水平居中 */
    .section-title {
      font-size: 22px;
      font-weight: bold;
      margin: 30px 0 20px;
      text-align: center;
      position: relative;
      padding-bottom: 10px;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background-color: #31c27c;
      border-radius: 2px;
    }
    
    /* 歌单推荐样式 */
    .playlist-section {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    /* 歌单分类标签样式 */
    .playlist-tabs {
      display: flex;
      margin-bottom: 20px;
      border-bottom: 1px solid #eee;
      justify-content: center;
    }
    
    .playlist-tab-item {
      padding: 8px 15px;
      font-size: 14px;
      cursor: pointer;
      transition: color 0.2s;
    }
    
    .playlist-tab-active {
      color: #31c27c;
      border-bottom: 2px solid #31c27c;
    }
    
    .playlist-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }
    
    .playlist-item {
      cursor: pointer;
      transition: transform 0.3s;
    }
    
    .playlist-item:hover {
      transform: translateY(-5px);
    }
    
    .cover-wrap {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .cover-img {
      width: 100%;
      display: block;
      transition: transform 0.3s;
    }
    
    .cover-wrap:hover .cover-img {
      transform: scale(1.05);
    }
    
    .cover-mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .cover-wrap:hover .cover-mask {
      opacity: 1;
    }
    
    .cover-play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .cover-wrap:hover .cover-play {
      opacity: 1;
    }
    
    .playlist-title {
      font-size: 14px;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .playlist-info {
      font-size: 12px;
      color: #999;
    }
    
    /* 新歌首发样式 */
    .songlist-section {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .song-tabs {
      display: flex;
      margin-bottom: 15px;
      border-bottom: 1px solid #eee;
      justify-content: center;
    }
    
    .tab-item {
      padding: 8px 15px;
      font-size: 14px;
      cursor: pointer;
      transition: color 0.2s;
    }
    
    .tab-active {
      color: #31c27c;
      border-bottom: 2px solid #31c27c;
    }
    
    .song-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 15px;
    }
    
    .song-item {
      display: flex;
      align-items: center;
      padding: 10px;
      border-radius: 6px;
      transition: background-color 0.2s;
    }
    
    .song-item:hover {
      background-color: #f5f5f5;
    }
    
    .song-cover {
      width: 50px;
      height: 50px;
      border-radius: 4px;
      margin-right: 10px;
    }
    
    .song-info {
      flex: 1;
    }
    
    .song-name {
      font-size: 14px;
      margin-bottom: 5px;
    }
    
    .song-singer {
      font-size: 12px;
      color: #999;
    }
    
    .song-interval {
      font-size: 12px;
      color: #999;
    }
    
    /* MV样式 */
    .mv-section {
      background-color: #fff;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    }
    
    .mv-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 20px;
    }
    
    .mv-item {
      cursor: pointer;
    }
    
    .mv-cover {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
      margin-bottom: 10px;
    }
    
    .mv-cover img {
      width: 100%;
      display: block;
    }
    
    .mv-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 40px;
      height: 40px;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s;
    }
    
    .mv-cover:hover .mv-play-icon {
      opacity: 1;
    }
    
    .mv-play-icon::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 10px solid white;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      margin-left: 2px;
    }
    
    .mv-title {
      font-size: 14px;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .mv-singer {
      font-size: 12px;
      color: #999;
      margin-bottom: 5px;
    }
    
    .mv-info {
      font-size: 12px;
      color: #999;
    }
  </style>
</head>
<body>
  <!-- 头部 -->
  <header>
    <div class="header-inner">
      <img src="imgs/qqmusic.png" alt="QQ音乐">
    </div>
  </header>
  
  <!-- 主要内容 -->
  <main>
    <!-- 歌单推荐 -->
    <section class="playlist-section">
      <h2 class="section-title">歌单推荐</h2>
      
      <!-- 歌单分类标签 -->
      <div class="playlist-tabs">
        <div class="playlist-tab-item playlist-tab-active">为你推荐</div>
        <div class="playlist-tab-item">运动</div>
        <div class="playlist-tab-item">网络歌曲</div>
        <div class="playlist-tab-item">思念</div>
        <div class="playlist-tab-item">官方歌单</div>
        <div class="playlist-tab-item">情歌</div>
      </div>
      
      <div class="playlist-grid" id="playlist-container">
        <!-- 歌单内容将通过JavaScript动态生成 -->
      </div>
    </section>
    
    <!-- 新歌首发 -->
    <section class="songlist-section">
      <h2 class="section-title">新歌首发</h2>
      <div class="song-tabs">
        <div class="tab-item tab-active">内地</div>
        <div class="tab-item">港台</div>
        <div class="tab-item">欧美</div>
        <div class="tab-item">韩国</div>
        <div class="tab-item">日本</div>
      </div>
      <div class="song-list" id="songlist-container">
        <!-- 歌曲内容将通过JavaScript动态生成 -->
      </div>
    </section>
    
    <!-- MV -->
    <section class="mv-section">
      <h2 class="section-title">MV</h2>
      <div class="mv-list" id="mvlist-container">
        <!-- MV内容将通过JavaScript动态生成 -->
      </div>
    </section>
  </main>

  <script>
    // 加载数据并渲染页面
    document.addEventListener('DOMContentLoaded', function() {
      // 模拟从task.json加载数据
      const mockData = {
        "playlist": [
          {
            "title": "翻唱女神J.Fla | 只唱你最爱的旋律",
            "cover": "http://qpic.y.qq.com/music_cover/8HhavvWNIicpyjlv0UnT5TWLRxhfmGTVwYtiaWd54wZItUPRu7486Fqw/300?n=1",
            "listen_num": 8915496
          },
          {
            "title": "古风女声控，优美旋律为你而来",
            "cover": "http://qpic.y.qq.com/music_cover/GUalk7A0sBGvkxmUrXIf7KnEVGJFicuoT7xSkZLHiaEMB5Ojbccf6cbA/300?n=1",
            "listen_num": 1712723
          },
          {
            "title": "想开一家早餐店，叫\"早点见面\"",
            "cover": "http://qpic.y.qq.com/music_cover/QrmdXDG3R4jGSEzqu0qtR4vw6Glga0N83eKicVCib61BZw5lZtWEUMibQ/300?n=1",
            "listen_num": 525134
          },
          {
            "title": "好评999+英文歌！轻松解压100％",
            "cover": "http://qpic.y.qq.com/music_cover/R8unPZMA4Vp5v2Ms96bst9nFCfe4YPBFBADicMz2LB0kLfEiaUM4ymiag/300?n=1",
            "listen_num": 123948993
          },
          {
            "title": "书房背景乐 沉浸于字里行间的时光",
            "cover": "http://qpic.y.qq.com/music_cover/IknB7UUG0ME0zalRpPKYjJiauia2kJzKs5gtKQY4Vq9TJYLXdjQK9fCA/300?n=1",
            "listen_num": 3033660
          }
        ],
        "songlist": [
          {
            "name": "Sabotage",
            "subtitle": "",
            "singer": [
              "Bebe Rexha"
            ],
            "interval": 176,
            "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000002myPA84G7kxG_1.jpg"
          },
          {
            "name": "如果人人爱音乐",
            "subtitle": "",
            "singer": [
              "张蔷"
            ],
            "interval": 226,
            "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000003UIhdS4fBLqU_1.jpg"
          },
          {
            "name": "你就不要想起我",
            "subtitle": "",
            "singer": [
              "R1SE赵磊"
            ],
            "interval": 270,
            "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000002v6ztM40D0iP_1.jpg"
          },
          {
            "name": "软肋",
            "subtitle": "",
            "singer": [
              "李宇春"
            ],
            "interval": 257,
            "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M0000005wEOc07Udwu_1.jpg"
          },
          {
            "name": "一爱如故",
            "subtitle": "《长歌行》电视剧插曲",
            "singer": [
              "摩登兄弟刘宇宁"
            ],
            "interval": 235,
            "cover": "https://y.gtimg.cn/music/photo_new/T002R90x90M000003vGVIq243Mzm_2.jpg"
          }
        ],
        "mvlist": [
          {
            "title": "向宿命挥拳的人 (《新斗罗大陆》手游戴沐白角色曲)",
            "singer": "阿云嘎",
            "listen_num": 9370,
            "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M102000SY7kU0vIuoT.jpg"
          },
          {
            "title": "雨",
            "singer": "Sunnee杨芸晴",
            "listen_num": 3585,
            "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M000003vHDbe24Jqpl.jpg"
          },
          {
            "title": "一爱如故 (《长歌行》电视剧插曲)",
            "singer": "摩登兄弟刘宇宁",
            "listen_num": 43495,
            "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M1010047OlaH3P3f0J.jpg"
          },
          {
            "title": "我很好骗",
            "singer": "动力火车",
            "listen_num": 11301,
            "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101002cYg662xvSlL.jpg"
          },
          {
            "title": "造梦时学会飞行 (《声梦传奇》主题曲)",
            "singer": "TVB",
            "listen_num": 1539,
            "cover": "https://y.gtimg.cn/music/photo_new/T015R640x360M101001YVtJL2sr2Z7.jpg"
          }
        ]
      };
      
      // 渲染歌单推荐
      renderPlaylist(mockData.playlist);
      
      // 渲染新歌首发
      renderSonglist(mockData.songlist);
      
      // 渲染MV
      renderMVList(mockData.mvlist);
      
      // 添加歌单分类标签点击事件
      setupPlaylistTabs();
    });
    
    // 设置歌单分类标签交互
    function setupPlaylistTabs() {
      const tabItems = document.querySelectorAll('.playlist-tab-item');
      
      tabItems.forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除所有标签的激活状态
          tabItems.forEach(item => {
            item.classList.remove('playlist-tab-active');
          });
          
          // 添加当前标签的激活状态
          this.classList.add('playlist-tab-active');
          
          // 在实际应用中，这里会发送请求获取对应分类的歌单数据
          // 由于是演示，我们只显示一个简单的提示
          console.log(`切换到分类: ${this.textContent}`);
        });
      });
    }
    
    // 渲染歌单推荐
    function renderPlaylist(playlist) {
      const container = document.getElementById('playlist-container');
      
      playlist.forEach(item => {
        const playlistItem = document.createElement('div');
        playlistItem.className = 'playlist-item';
        
        // 格式化播放量
        const listenNum = formatNumber(item.listen_num);
        
        playlistItem.innerHTML = `
          <div class="cover-wrap">
            <img src="${item.cover}" alt="${item.title}" class="cover-img">
            <div class="cover-mask"></div>
            <img src="imgs/cover_play.png" alt="播放" class="cover-play">
          </div>
          <div class="playlist-title">${item.title}</div>
          <div class="playlist-info">播放量：${listenNum}</div>
        `;
        
        container.appendChild(playlistItem);
      });
    }
    
    // 渲染新歌首发
    function renderSonglist(songlist) {
      const container = document.getElementById('songlist-container');
      
      songlist.forEach(song => {
        const songItem = document.createElement('div');
        songItem.className = 'song-item';
        
        // 格式化时长
        const interval = formatTime(song.interval);
        
        songItem.innerHTML = `
          <img src="${song.cover}" alt="${song.name}" class="song-cover">
          <div class="song-info">
            <div class="song-name">${song.name}${song.subtitle ? ` - ${song.subtitle}` : ''}</div>
            <div class="song-singer">${song.singer.join('、')}</div>
          </div>
          <div class="song-interval">${interval}</div>
        `;
        
        container.appendChild(songItem);
      });
    }
    
    // 渲染MV
    function renderMVList(mvlist) {
      const container = document.getElementById('mvlist-container');
      
      mvlist.forEach(mv => {
        const mvItem = document.createElement('div');
        mvItem.className = 'mv-item';
        
        // 格式化播放量
        const listenNum = formatNumber(mv.listen_num);
        
        mvItem.innerHTML = `
          <div class="mv-cover">
            <img src="${mv.cover}" alt="${mv.title}">
            <div class="mv-play-icon"></div>
          </div>
          <div class="mv-title">${mv.title}</div>
          <div class="mv-singer">${mv.singer}</div>
          <div class="mv-info">播放量：${listenNum}</div>
        `;
        
        container.appendChild(mvItem);
      });
    }
    
    // 格式化数字（添加万/亿单位）
    function formatNumber(num) {
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿';
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万';
      }
      return num.toString();
    }
    
    // 格式化时间（秒转分:秒）
    function formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
    }
  </script>
</body>
</html>